<template>
  <div
    :class="[
      add_new_type_border,
      css_content_padding,
      css_wind_light_hover,
      css_cursor_pointer,
    ]"
    :id="add_new_type_border"
    :keyVal_node="add_new_type_inp"
    :selected_type="false"
  >
    <keyVal_node
      :for_form="upload_file_form"
      :for_key="spacename_add_new_type"
      :class="[add_new_type_keyVal_inp]"
      type="text"
      :id="add_new_type_inp"
    ></keyVal_node>
    <div :class="[add_new_type_icon]" :id="add_new_type_icon">+</div>
    <uni_type
      v-for="cur_uni_type in ref_cur_active_type_info"
      :key="cur_uni_type.id"
      :id="cur_uni_type.id"
      :cur_uni_type_id="get_full_id_cur_active_uni_type(cur_uni_type.id)"
      :val="cur_uni_type.val"
      :active="cur_uni_type.active"
    ></uni_type>
    <div :class="[add_new_type_container]" :id="add_new_type_container">
      <div
        :class="[add_new_type_search_active_border, css_content_padding]"
        :id="add_new_type_search_active_border"
        view_active="false"
      >
        <active_type></active_type>
        <search_type></search_type>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

import search_type from './uni_comps/search_type/search_type.vue';
import active_type from './uni_comps/active_type/active_type.vue';

import uni_type from './uni_comps/uni_type/uni_type.vue';

import keyVal_node from '@/components/global_comps/uni_comps/keyVal_node/keyVal_node.vue';

import './add_new_type.css';
import { init_add_new_type } from './add_new_type';
import {
  add_new_type_border,
  add_new_type_container,
  add_new_type_icon,
  add_new_type_inp,
  add_new_type_keyVal_inp,
  add_new_type_search_active_border,
  spacename_add_new_type,
} from './DataDefine/sourceData';
import {
  css_content_padding,
  css_cursor_pointer,
  css_wind_light_hover,
} from '../../../global_comps/Css';
import { ref_cur_active_type_info } from './Func/ref_cur_active_type_info';
import { get_full_id_cur_active_uni_type } from './Func/get_full_id_cur_active_uni_type';
import { upload_file_form } from '../../DataDefine/sourceData';

let cur_add_new_type_props = defineProps({});

onMounted(() => {
  init_add_new_type();
});
</script>
